<script setup>
import {onBeforeRouteUpdate, useRoute} from "vue-router";
import {onMounted, ref, watch} from "vue";
import {getDmOppUserApi} from "@/api/message.js";
import {userStore} from "@/stores/userStore.js";
import {host_custom} from "@/host.js";
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import {timeToNumber} from "@/utils/timeToNumber.js";

const route = useRoute()
const oppoProfile = ref({})

const isReadyToShow = ref(false)
const getOpposeProfile = async (conId) => {
  const res = await getDmOppUserApi(conId, userStore().userInfo.id)
  console.log(res.data[0])
  if (res.status === 200) {
    oppoProfile.value = res.data[0]
    isReadyToShow.value = true
  } else {
    isReadyToShow.value = false
  }
}

onMounted(async ()=> {
  if (route.name === 'conversation') {
    await getOpposeProfile(route.params.dmId)
  }
})

onBeforeRouteUpdate(async (to, from, next)=>{
  isReadyToShow.value = false
  if (to.name === 'conversation') {
    await getOpposeProfile(to.params.dmId)
  }
  next()
})


</script>

<template>
  <div id="detailBar" v-if="route.name === 'conversation'" class="collapse collapse-horizontal show">
    <template v-if="isReadyToShow">
      <div class="profile-bg position-relative p-2" :style="{backgroundImage: `url(${host_custom+'/pfp/'+oppoProfile.avatar})`}">
        <div class="float-end rounded-circle card-btn"><font-awesome-icon :icon="['fas', 'user-check']" size="sm" /></div>

        <img :src="host_custom+'/pfp/'+oppoProfile.avatar" class="rounded-circle profile-img" alt="pfp">
      </div>

      <div class="px-3 profile-body">
        <p class="mt-2 fw-bold">{{ oppoProfile.name }}</p>

        <div class="text-light-emphasis rounded-3 p-2 bg-body-tertiary">
          <b class="mb-2"  v-if="oppoProfile.bio" style="font-size: 12px">用户信息</b>
          <p style="font-size: 13px" v-if="oppoProfile.bio">
            {{ oppoProfile.bio }}
          </p>

          <b class="mb-2" style="font-size: 12px">加入时间</b>
          <span style="font-size: 13px" class="d-block">
            {{ timeToNumber(oppoProfile.create_time).year +'-'+  timeToNumber(oppoProfile.create_time).month +'-'+  timeToNumber(oppoProfile.create_time).month }}
          </span>
        </div>

      </div>

    </template>

    <template v-else>
      <div class="w-100 h-100 d-flex justify-content-center align-items-center">
        <div class="spinner-border text-primary" style="width: 2.5rem; height: 2.5rem" role="status"></div>
      </div>
    </template>
  </div>
</template>

<style scoped>
#detailBar {
  overflow: hidden;
  width: 340px;
  -webkit-transition: none;
  transition: none;
  background-color: var(--myTabsColor);
}

@media (max-width: 1131px) {
  #detailBar {
    display: none !important;
  }
}

.profile-bg {
  height: 120px;
  background-size: 100%;
  background-position: center;
}

.profile-body {
  margin-top: 45px;
}

.profile-img {
  border: 6px solid var(--myTabsColor);
  bottom: 0;
  transform: translateY(50%);
  position: absolute;
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.card-btn {
  transition: none;
  cursor: pointer;
  color: white;
  background-color: var(--card-btn-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.card-btn:hover {
  background-color: var(--card-btn-color-hover);
}
</style>